﻿@model CustomerAddressListModel
@using SpotsHub.Gateway.Models.Customer;
@using Nop.Web.Models.Common;
@using Nop.Core.Infrastructure;
@using Telerik.Web.Mvc;
@using Telerik.Web.Mvc.UI;

@{
    Layout = "~/Views/Shared/_MyHUB.cshtml";

    //title
    ViewBag.Title = T("Account.MyAccount") + " - " + T("Account.CustomerAddresses");

    var gridPageSize = EngineContext.Current.Resolve<Nop.Core.Domain.Customers.CustomerSettings>().GridPageSize;
    if (gridPageSize <= 0)
    {
        gridPageSize = 10;
    }
    string countryOptions = "";
    string stateProvinceOptions = "";
    foreach (var sp in Model.AvailableStates)
    {
        stateProvinceOptions += "<option value=" + sp.Value + ">" + sp.Text + "</option>";
    } foreach (var c in Model.AvailableCountries)
    {
        countryOptions += "<option value=" + c.Value + ">" + c.Text + "</option>";
    }
}
@section left
{
    @Html.Partial("MyAccountNavigation", Model.NavigationModel, new ViewDataDictionary())
}
<div class="page-address">
    <div class="address-book-wrapper slide-wrapper">
        <div class="address-book-table slide">
            <h1 class="section-title">@T("Account.CustomerAddresses")</h1>
            <div class="section-wrapper">
                <div class="address-list-page customer-info-page address-book-page my-hub-body">
                    <div class="address-buttons row">
                        <div class="col-xs-12 col-md-4">
                            <button type="button" class="btn btn-normal form-control add-button">@T("Common.AddNew")</button>
                        </div>
                        <div class="col-xs-12 col-md-3">
                            <div class="address-loading">
                                <img class="loading-gif" src="/content/images/loading.gif" />
                                <img class="loading-svg" src="/content/images/loading.svg" />
                            </div>
                        </div>
                        <div class="clear"></div>
                    </div>
                    <div class="address-list">
                        <div class="add-address address-row">
                            @Html.Action("AddressAddInPage", "Customer")
                        </div>

                        <div>
                            @(Html.Telerik().Grid<AddressModel>()
                                .Name("customer-addresses-grid")
                                .DataKeys(keys =>
                                {
                                    keys.Add(x => x.Id).RouteKey("addressId");
                                })
                                .DataBinding(binding =>
                                {
                                    binding.Ajax()
                                        .Select("AddressesLoad", "Customer", Model);
                                })
                                .Columns(columns =>
                                {
                                    columns.Bound(x => x.Company)
                                        .HtmlAttributes(new { Class = "table-company" })
                                        .HeaderHtmlAttributes(new { Class = "table-company t-header" });
                                    columns.Bound(x => x.AddressHtml)
                                        .Encoded(false)
                                        .Title("Address")
                                        .HtmlAttributes(new { Class = "table-address" })
                                        .HeaderHtmlAttributes(new { Class = "table-address t-header" });
                                    columns.Bound(x => x.Company)
                                        .ClientTemplate("<strong><#= FirstName #> <#= LastName #></strong>")
                                        .Title("Name")
                                        .HtmlAttributes(new { Class = "table-name" })
                                        .HeaderHtmlAttributes(new { Class = "table-name t-header" });
                                    
                                    columns.Bound(x => x.Email)
                                        .HtmlAttributes(new { Class = "table-email" })
                                        .HeaderHtmlAttributes(new { Class = "table-email t-header" });
                                    columns.Bound(x => x.Id)
                                        .ClientTemplate("<input type='button' class='btn btn-normal form-control edit-address-button address-<#=Id #>' value='Edit' data-id='<#= Id #>' />")
                                        .Title(T("Admin.Common.Edit").Text)
                                        .HtmlAttributes(new { Class = "table-edit" })
                                        .HeaderHtmlAttributes(new { Class = "table-edit t-header" });
                                    
                                    columns.Bound(x => x.Id)
                                        .Hidden()
                                        .ClientTemplate(
                                            "<div class='edit-address row edit-address-<#=Id#>'>" +
                                            "<input type='hidden' class='addressId' name='" + Html.NameFor(model => model.Address.Id) + "' value='<#=Id#>' />" +
                                            "<input type='hidden' class='addressCountryId' name='" + Html.NameFor(model => model.Address.CountryId) + "' value='<#=CountryId#>' />" +
                                            "<div class='col-sm-4'><div class='info-label'><label for='" + Html.NameFor(model => model.Address.FirstName) + "'>" + Html.DisplayNameFor(model => model.Address.FirstName) + "</label></div><div class='info-input'><input type='text' class='form-control' name='" + Html.NameFor(model => model.Address.FirstName) + "' value='<#=FirstName#>' /></div></div>" +
                                            "<div class='col-sm-4'><div class='info-label'><label for='" + Html.NameFor(model => model.Address.LastName) + "'>" + Html.DisplayNameFor(model => model.Address.LastName) + "</label></div><div class='info-input'><input type='text' class='form-control' name='" + Html.NameFor(model => model.Address.LastName) + "' value='<#=LastName#>' /></div></div>" +
                                            "<div class='col-sm-4'><div class='info-label'><label for='" + Html.NameFor(model => model.Address.Company) + "'>" + Html.DisplayNameFor(model => model.Address.Company) + "</label></div><div class='info-input'><input type='text' class='form-control' name='" + Html.NameFor(model => model.Address.Company) + "' value='<#=Company#>' placeholder='(Optional)' /></div></div>" +
                                            "<div class='col-sm-8'><div class='info-label'><label for='" + Html.NameFor(model => model.Address.Address1) + "'>" + Html.DisplayNameFor(model => model.Address.Address1) + "</label></div><div class='info-input'><input type='text' class='form-control' name='" + Html.NameFor(model => model.Address.Address1) + "' value='<#=Address1#>' /></div></div>" +
                                            "<div class='col-sm-4'><div class='info-label'><label for='" + Html.NameFor(model => model.Address.Address2) + "'>" + Html.DisplayNameFor(model => model.Address.Address2) + "</label></div><div class='info-input'><input type='text' class='form-control' name='" + Html.NameFor(model => model.Address.Address2) + "' value='<#=Address2#>' placeholder='(Optional)' /></div></div>" +
                                            "<div class='col-sm-4'><div class='info-label'><label for='" + Html.NameFor(model => model.Address.City) + "'>" + Html.DisplayNameFor(model => model.Address.City) + "</label></div><div class='info-input'><input type='text' class='form-control' name='" + Html.NameFor(model => model.Address.City) + "' value='<#=City#>' /></div></div>" +
                                            "<div class='col-sm-2'><div class='info-label'><label for='" + Html.NameFor(model => model.Address.StateProvinceName) + "'>" + Html.DisplayNameFor(model => model.Address.StateProvinceName) + "</label></div><div class='info-input'><select class='form-control' name='" + Html.NameFor(model => model.Address.StateProvinceId) + "' data-val='<#=StateProvinceId#>'>" + stateProvinceOptions + "</select></div></div>" +
                                            "<div class='col-sm-2'><div class='info-label'><label for='" + Html.NameFor(model => model.Address.CountryName) + "'>" + Html.DisplayNameFor(model => model.Address.CountryName) + "</label></div><div class='info-input'><input type='text' class='form-control' disabled='disabled' class='input-display' name='" + Html.NameFor(model => model.Address.CountryName) + "' value='<#=CountryName#>' /></div></div>" +
                                            "<div class='col-sm-4'><div class='info-label'><label for='" + Html.NameFor(model => model.Address.ZipPostalCode) + "'>" + Html.DisplayNameFor(model => model.Address.ZipPostalCode) + "</label></div><div class='info-input'><input type='text' class='form-control' name='" + Html.NameFor(model => model.Address.ZipPostalCode) + "' value='<#=ZipPostalCode#>' /></div></div>" +
                                            "<div class='col-sm-4'><div class='info-label'><label for='" + Html.NameFor(model => model.Address.Email) + "'>" + Html.DisplayNameFor(model => model.Address.Email) + "</label></div><div class='info-input'><input type='text' class='form-control' name='" + Html.NameFor(model => model.Address.Email) + "' value='<#=Email#>' /></div></div>" +
                                            "<div class='col-sm-4'><div class='info-label'><label for='" + Html.NameFor(model => model.Address.CellPhoneNumber) + "'>" + Html.DisplayNameFor(model => model.Address.CellPhoneNumber) + "</label></div><div class='info-input'><input type='text' class='form-control' name='" + Html.NameFor(model => model.Address.CellPhoneNumber) + "' value='<#=CellPhoneNumber#>' /></div></div>" +
                                            "<div class='col-sm-4'><div class='info-label'><label for='" + Html.NameFor(model => model.Address.PhoneNumber) + "'>" + Html.DisplayNameFor(model => model.Address.PhoneNumber) + "</label></div><div class='info-input'><input type='text' class='form-control' name='" + Html.NameFor(model => model.Address.PhoneNumber) + "' value='<#=PhoneNumber#>' placeholder='(Optional)' /></div></div>" +
                                            "</div>"
                                        );
                                        //columns.Bound(x => x.Id)
                                        //    .ClientTemplate("<span class='address-book-shipping-icon <#=IsShippingAddress #>'><i class='fa fa-flag'></i></span><span class='address-book-billing-icon <#=IsBillingAddress #>'><i class='fa fa-credit-card'></i></span>")
                                        //    .Title("Default")
                                        //    .Centered()
                                        //    .HtmlAttributes(new { Class = "table-default" })
                                        //    .HeaderHtmlAttributes(new { Class = "table-default t-header" });
                                })
                                .Pageable(settings => settings.PageSize(gridPageSize).Position(GridPagerPosition.Bottom))
                                .HtmlAttributes(new { Class = "address-row address-header t-widget t-grid" })
                                .ClientEvents(events =>
                                {
                                    events.OnDataBinding("onDataBinding");
                                    events.OnComplete("onComplete");
                                })
                                .NoRecordsTemplate(T("MyAccount.Address.NoAddressAvalible").Text)
                                .EnableCustomBinding(true))
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="address-book-edit slide">
            <h1 class="section-title">@T("Account.CustomerAddressesEdit")</h1>
            <div class="my-hub-body section-wrapper">
                <div class="messages"></div>
                @using (Html.BeginForm("AddressEditInPage", "Customer", FormMethod.Post))
                {
                }
                <div class="address-edit-inputs">
                    <input type="checkbox" id="isShipping" name="isShipping" /> <span><i class='fa fa-flag'></i> This is your Shipping Address.</span><br />
                    <input type="checkbox" id="isBilling" name="isBilling" /> <span><i class='fa fa-credit-card'></i> This is your Billing Address.</span><br /><br />
                    <input type="button" class="btn btn-normal address-edit-save" value="Save" />
                    <input type="button" class="btn btn-normal address-edit-delete" value="Delete" />
                    <input type="button" class="btn btn-normal address-edit-cancel" value="Cancel" />
                </div>
                <div class="address-edit-complete">
                    <input type="button" class="btn btn-primary address-edit-cancel" value="Back" />
                </div>
            </div>
        </div>
        <div class="address-book-delete-confirm slide">
            <div class="address-edit-inputs">
                <h1 class="section-title">@T("Account.CustomerAddressesDeletePrompt")</h1>
                <div class="my-hub-body section-wrapper">
                    <div class="messages"></div>
                    <div class="address-delete-action-wrapper">
                        <p>Are you sure you want to delete this address from your address book? If this address is your default billing or shipping address, it will also be removed.</p>
                        <input type="button" class="btn btn-primary address-edit-proceed-delete" value="Delete" />
                        <input type="button" class="btn btn-primary address-edit-cancel-delete" value="Cancel" />
                    </div>
                </div>
            </div>
            <div class="address-edit-complete">
                <h1 class="section-title">@T("Account.CustomerAddressesDeleteComplete")</h1>
                <div class="my-hub-body section-wrapper">
                    <div class="messages"></div>
                    <input type="button" class="btn btn-primary address-edit-cancel" value="Back" />
                </div>
            </div>
        </div>
        <div class="clear"></div>
    </div>
    <div class="address-action-loading">
        <img class="loading-gif" src="/content/images/loading.gif" />
        <img class="loading-svg" src="/content/images/loading.svg" />
    </div>
</div>

<script type="text/javascript">
    $(document).on('click', 'input.edit-address-button', function () {
        $(".address-book-edit .messages").empty();
        $(".address-book-edit form").empty().append($(this).closest("tr").find(".edit-address").clone());
        $(".address-edit-inputs").show();
        $(".address-edit-complete").hide();
        if ($(".address-book-edit form .addressId").length) {
            $(".address-edit-delete").show();
        } else {
            $(".address-edit-delete").hide();
        }
        $(".address-book-edit").css("left", "100%").stop().animate({
            left: 0
        }, 200);
        if ($(this).closest("tr").find(".address-book-shipping-icon").hasClass("true")) {
            $("#isShipping").prop('checked', true);
        } else {
            $("#isShipping").prop('checked', false);
        }
        if ($(this).closest("tr").find(".address-book-billing-icon").hasClass("true")) {
            $("#isBilling").prop('checked', true);
        } else {
            $("#isBilling").prop('checked', false);
        }
        $(".address-book-table").stop().animate({
            left: "-100%"
        }, 200, function () {
            $(".address-book-edit").css("position", "relative");
            $(".address-book-table").css("position", "absolute");
        });
    }).on('click', '.address-edit-cancel', function () {
        $(".address-book-table").stop().animate({
            left: 0
        }, 200);
        if ($(this).closest(".address-book-delete-confirm").length) {
            $(".address-book-delete-confirm").stop().animate({
                left: "100%"
            }, 200, function () {
                $(".address-book-edit").css("position", "absolute");
                $(".address-book-table").css("position", "relative");
                $(".address-book-edit form").empty();
                $(".address-book-edit form, .address-edit-inputs, .address-delete-action-wrapper").show();
            });
        } else {
            $(".address-book-edit").stop().animate({
                left: "100%"
            }, 200, function () {
                $(".address-book-edit").css("position", "absolute");
                $(".address-book-table").css("position", "relative");
                $(".address-book-edit form").empty();
                $(".address-book-edit form, .address-edit-inputs, .address-delete-action-wrapper").show();
            });
        }
        var grid = $("#customer-addresses-grid").data('tGrid');
        grid.currentPage = 1;
        grid.ajaxRequest();
    }).on('click', '.add-button', function () {
        $(".address-book-edit .messages").empty();
        $(".address-book-edit form").empty().append($(".address-book-table .address-book-new").clone());
        $(".address-edit-inputs").show();
        $(".address-edit-complete").hide();
        if ($(".address-book-edit form .addressId").length) {
            $(".address-edit-delete").show();
        } else {
            $(".address-edit-delete").hide();
        }
        $(".address-book-edit").css("left", "100%").stop().animate({
            left: 0
        }, 200);
        $(".address-book-table").stop().animate({
            left: "-100%"
        }, 200, function () {
            $(".address-book-edit").css("position", "relative");
            $(".address-book-table").css("position", "absolute");
        });
    }).on('click', '.address-edit-save', function () {
        $(".address-book-edit .messages").empty();
        var form = $(".address-book-edit form");
        var d = form.serializeArray();
        if ($("#isShipping").is(":checked")) {
            d.push({ name: "isShippingAddress", value: true });
        }
        if ($("#isBilling").is(":checked")) {
            d.push({ name: "isBillingAddress", value: true });
        }
        $(".address-action-loading").stop().fadeIn(200);
        $(".address-book-edit form, .address-edit-inputs").stop().fadeOut(200);
        $.ajax({
            url: form.prop("action"),
            data: d,
            type: "POST",
            dataType: "JSON"
        }).success(function (response) {
            if (response.success == true) {
                $(".address-edit-inputs").hide();
                $(".address-edit-complete").show();
                $(".address-book-edit form").empty();
            } else {
                $(".address-book-edit form, .address-edit-inputs").stop().fadeIn(200);
            }
            if (response.messages) {
                $(".address-book-edit .messages").html(response.messages);
            }
        }).error(function (response) {
            $(".address-book-edit form, .address-edit-inputs").stop().fadeIn(200);
        }).always(function () {
            $(".address-action-loading").stop().fadeOut(200);
        });
    }).on('click', '.address-edit-delete', function () {
        $(".address-book-delete-confirm .messages").empty()
        $(".address-book-edit").stop().animate({
            left: "-100%"
        }, 200);
        $(".address-book-delete-confirm").stop().animate({
            left: 0
        }, 200);
    }).on('click', '.address-edit-proceed-delete', function () {
        $(".address-book-edit .messages").empty();
        var form = $(".address-book-edit form");
        var d = form.serializeArray();
        d.push({ name: "isDelete", value: true });
        $(".address-action-loading").stop().fadeIn(200);
        $(".address-delete-action-wrapper").stop().fadeOut(200);
        $.ajax({
            url: form.prop("action"),
            data: d,
            type: "POST",
            dataType: "JSON"
        }).success(function (response) {
            if (response.success == true) {
                $(".address-edit-inputs").hide();
                $(".address-edit-complete").show();
            } else {
                $(".address-delete-action-wrapper").stop().fadeIn(200);
            }
            if (response.messages) {
                $(".address-book-delete-confirm .messages").html(response.messages);
            }
        }).error(function (response) {
        }).always(function () {
            $(".address-action-loading").stop().fadeOut(200);
        });
    }).on('click', '.address-edit-cancel-delete', function () {
        $(".address-book-edit .messages").empty();
        $(".address-book-edit").stop().animate({
            left: 0
        }, 200);
        $(".address-book-delete-confirm").stop().animate({
            left: "100%"
        }, 200, function () {
            $(".address-book-edit form, .address-edit-inputs, .address-delete-action-wrapper").show();
        });
    });
    function onDataBinding(e) {
        $(".address-loading").stop().fadeIn(200);
    }
    function onComplete() {
        $(".address-loading").stop().fadeOut(200);
    }
</script>